<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-in-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable-behavior.html">

<dom-module
    id="slide-tile">

<template>
    <style>
      #slide {
        min-height: 100%;
        min-width: 100%;
      }
    </style>
    <section id="slide" class="flow vertical pack-center pack-across-center">
        <content></content>
    </section>
</template>

<script>
    Polymer({
        is: "slide-tile",
        behaviors: [Polymer.NeonAnimatableBehavior]
    })
</script>
</dom-module>

<dom-module
    name="slide-show"
    >

<template>
  <style>
    #slides {
      height: 100vh;
    }
  </style>
  <neon-animated-pages entry-animation="fade-in-animation" exit-animation="fade-out-animation" id="slides" selected="{{selected}}" tabindex="0" style="position:relative; height:100vh; width: 100vw;"
  >
    <content></content>
  </neon-animated-pages>
    <!-- TODO: touch guestures, esc for overview -->
    <iron-a11y-keys target="{{}}" keys="up down left right enter ctrl+left ctrl+right shift+left shift+right" on-keys-pressed="arrowHandler"></iron-a11y-keys>
</template>

<script>
Polymer({
    is: "slide-show",
    properties: {
      selected: {
        type: Number,
        value: 0,
        notify: true
      }
    },
    behaviors: [EscherMixins.LifeCycle],

    refreshCodeMirror: function () {

      // Refresh any code-mirror tile in the currently selected slide
        var cs = this.$.slides.selectedItem.querySelectorAll("code-mirror");
        for (var i=0, l=cs.length; i < l; i++) {
            cs[i].mirror.refresh()
        }
    },
    domInit: function () {
        var self = this
        this.setAttribute("tabindex", 0)
    },
    transitionToSlide: function (i) {
        var self = this;
        if (!this.$.slides.items[i]) {
          return
        }
        this.$.slides.selected = i
        setTimeout(function () {
            self.refreshCodeMirror()
        }, 0)
    },
    showNext: function (wrapped) {
        var slides = this.$.slides
        var i = wrapped &&
            slides.selected >= slides.items.length - 1 ?
                0 : slides.selected + 1
        this.transitionToSlide(i)
    },
    showPrev: function (wrapped) {
        var slides = this.$.slides
        var i = wrapped && !slides.selected ?
            slides.items.length - 1 : slides.selected - 1;
        this.transitionToSlide(i)
    },
    arrowHandler: function (ev) {
      // TODO: fragments and custom transition

      if (ev.detail.keyboardEvent.target === this.$.slides) {
        // Only take action if the keyboard event target is the neon-animation element
        switch(ev.detail.key) {
        case "left":
        case "up":
            this.showPrev()
            break;
        case "right":
        case "enter":
        case "down":
            this.showNext()
            break;
        }
      }
    }
})
</script>

</dom-module>

